<template>
	<div id="app">
		<a-space class="logos" style="float: left">
			<img src="./assets/logo.png" />
			<img src="./assets/hi.png" />
			<div>期待大家的参与😁</div>
		</a-space>
		<a-row type="flex" class="menus">
			<a-button-group>
				<template v-for="demo in demoList" :key="demo.name">
					<a-button :type="demo.name === curDemo ? 'primary' : 'info'" @click="curDemo = demo.name">
						{{ demo.title }}
					</a-button>
				</template>
			</a-button-group>
			<div style="margin-left: 20px" />
			<a-button
				style="width: 200px; font-size: 16px"
				:type="'templates' === curDemo ? 'primary' : 'info'"
				icon="file-search"
				@click="curDemo = 'templates'"
			>
				模 板 中 心
			</a-button>
			<div style="margin-left: 20px"></div>
			<a-select
				v-if="curDemo == 'printDesign'"
				ref="verSelect"
				v-model:value="version"
				:options="versions"
				@change="handleVerChange"
				style="width: 160px"
			/>
			<div style="margin-left: 20px"></div>
			<a-select
				v-if="i18nSupport"
				ref="i18nSelect"
				v-model:value="lang"
				:options="languages"
				@change="handleLangChange"
				style="width: 160px"
			/>
		</a-row>
		<!-- 动态渲染组件，懒得去弄路由了 -->
		<keep-alive>
			<component :is="currentComponent" />
		</keep-alive>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from "vue";
import PrintDesign from "@/demo/design/index.vue";
import PrintCustom from "@/demo/custom/index.vue";
import PrintTasks from "@/demo/tasks/index.vue";
import PrintPanels from "@/demo/panels/index.vue";
import Templates from "@/demo/templates/index.vue";

interface DemoItem {
	name: string;
	title: string;
}

interface LanguageOption {
	label: string;
	value: string;
}

interface NpmInfo {
	versions: Record<string, any>;
}

export default defineComponent({
	name: "App",
	components: {
		PrintDesign,
		PrintCustom,
		PrintTasks,
		PrintPanels,
		Templates
	},
	setup() {
		const curDemo = ref<string>("printDesign");
		const demoList = ref<DemoItem[]>([
			{ name: "printDesign", title: "默认拖拽设计" },
			{ name: "printCustom", title: "自定义设计" },
			{ name: "printTasks", title: "队列/批量打印" },
			{ name: "printPanels", title: "多面板设计" }
		]);

		// npm 信息
		const npmInfo = ref<NpmInfo>({ versions: {} });
		const versions = ref<LanguageOption[]>([]);
		const lang = ref<string>("cn");
		const languages = ref<LanguageOption[]>([
			{ label: "简体中文-cn", value: "cn" },
			{ label: "英语-en", value: "en" },
			{ label: "德语-de", value: "de" },
			{ label: "西班牙语-es", value: "es" },
			{ label: "法语-fr", value: "fr" },
			{ label: "意大利语-it", value: "it" },
			{ label: "日语-ja", value: "ja" },
			{ label: "俄语-ru", value: "ru" },
			{ label: "繁体中文-cn_tw", value: "cn_tw" }
		]);

		// 选择版本
		const version = ref<string>(sessionStorage.getItem("version") || "development");
		const verSelect = ref(null);
		const i18nSelect = ref(null);

		// 计算属性
		const i18nSupport = computed(() => {
			return version.value === "development" || (version.value && decodeVer(version.value).verVal >= 55.8);
		});

		const currentComponent = computed(() => {
			switch (curDemo.value) {
				case "printDesign":
					return PrintDesign;
				case "printCustom":
					return PrintCustom;
				case "printTasks":
					return PrintTasks;
				case "printPanels":
					return PrintPanels;
				case "templates":
					return Templates;
				default:
					return PrintDesign;
			}
		});

		// 解码版本号
		const decodeVer = (version: string) => {
			const parts = version.split(".");
			return {
				verVal: parseFloat(`${parts[0]}.${parts[1]}`),
				patch: parts[2] ? parseInt(parts[2]) : 0
			};
		};

		// 获取版本信息
		const getVersion = () => {
			const xhr = new XMLHttpRequest();
			// jsdelivr 源
			// xhr.open(
			//   "GET",
			//   "https://data.jsdelivr.com/v1/packages/npm/vue-plugin-hiprint"
			// );
			// cnpm 源
			xhr.open("GET", "https://registry.npmmirror.com/vue-plugin-hiprint");
			xhr.onload = () => {
				if (xhr.status === 200) {
					npmInfo.value = JSON.parse(xhr.responseText);
					versions.value = Object.keys(npmInfo.value.versions)
						.map(version => ({
							label: version,
							value: version
						}))
						.reverse();
					if (import.meta.env.MODE === "development") {
						versions.value.unshift({
							label: "development",
							value: "development"
						});
					}
					version.value = version.value || versions.value[0]?.value;
				}
			};
			xhr.send();
		};

		// 版本切换事件
		const handleVerChange = (val: string) => {
			sessionStorage.setItem("version", val);
			location.reload();
		};

		// 语言切换事件
		const handleLangChange = (val: string) => {
			sessionStorage.setItem("lang", val);
			location.reload();
		};

		// 生命周期
		onMounted(() => {
			lang.value = sessionStorage.getItem("lang") || "cn";
			getVersion();
		});

		return {
			curDemo,
			demoList,
			npmInfo,
			versions,
			lang,
			languages,
			version,
			verSelect,
			i18nSelect,
			i18nSupport,
			currentComponent,
			handleVerChange,
			handleLangChange
		};
	}
});
</script>

<style lang="less">
.logos {
	display: flex;
	align-self: center;
	justify-content: center;
	padding: 6px 24px;
	img {
		width: 40px;
		height: 40px;
	}
}
.menus {
	padding: 10px 24px;
}

// hiprint 拖拽图片
.hiprint-printElement-image-content {
	img {
		content: url("~@/assets/logo.png");
	}
}

// 修改 页眉/页脚线 样式
.hiprint-headerLine,
.hiprint-footerLine {
	border-color: red !important;
}
.hiprint-headerLine:hover,
.hiprint-footerLine:hover {
	border-top: 3px dashed red !important;
}
.hiprint-headerLine:hover::before {
	position: relative;
	top: -12px;
	left: calc(50% - 18px);
	font-size: 12px;
	color: red;
	content: "页眉线";
	background: #ffffffff;
}
.hiprint-footerLine:hover::before {
	position: relative;
	top: -12px;
	left: calc(50% - 18px);
	font-size: 12px;
	color: red;
	content: "页脚线";
	background: #ffffffff;
}
</style>
